<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <title>积分充值</title>
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/jf_pay.css">
</head>

<body>
    <div class="jf_pay_wrap">
        <div class="header_wrap">
            <img src="./images/notice_icont.png" alt="消息">
            <p>查看你的积分/权益还剩多少</p>
        </div>
        <div class="content">
            <div class="pay_wrap">
                <div class="header_box">
                    <h2>ZH137176</h2>
                    <p>微信号码</p>
                </div>
                <div class="card_type">
                    <h3>卡片类型</h3>
                    <ul>
                        <li class="active">
                            <h2>积分充值卡</h2>
                            <p>线上+线下购物 | 线上兑彩 银联通付</p>
                            <div class="ab_wrap">
                                <img src="./images/gou_icont.png" alt="对勾">
                            </div>
                        </li>
                        <li>
                            <h2>权益充值卡</h2>
                            <p>支付时，可抵扣现金使用可拆分、叠加使用</p>
                            <div class="ab_wrap">
                                <!-- <img src="./images/gou_icont.png" alt="对勾"> -->
                            </div>
                        </li>
                    </ul>
                    <dl>
                        <dd>
                            <h4>积分类型</h4><span>惠民积分</span>
                        </dd>
                        <dd>
                            <h4>面值金额</h4><span>300积分</span>
                        </dd>
                    </dl>
                </div>
                <div class="rule_wrap">
                    <input type="checkbox" value="" />
                    <p>我已阅读并同意<a href="#">服务协议</a>及<a href="#">收费规则</a>条款</p>
                </div>
                <div class="button_wrap">立即充值</div>
            </div>
        </div>
    </div>

    <!-- 支付弹框 -->
    <div class="shown_wrap" style="display: none;">
        <!-- 阴影 -->
        <div class="fixed_wrap"></div>
        <!-- 弹框 -->
        <div class="alert_wrap">
            <div class="head">
                <img src="./images/close_bg.png" alt="关闭">
                <h2>请输入充值卡密码</h2>
            </div>
            <div class="name">权益积分</div>
            <div class="number">1.00</div>
            <div class="two_wrap">
                <div class="left_name">权益名称</div>
                <div class="right_wrap"> <img src="./images/jb.png" alt="金币">惠民权益</div>
            </div>
            <div class="password-div">
                <label for="password" class="password-lable">
                    <ul>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                    <input id="password" type="password" name="password" maxlength="6">
                </label>
            </div>
        </div>
    </div>

    <!-- 公众号关注 -->
    <div class="gzh_shown" style="display: none;">
        <div class="img_wrap">
            <img src="./images/wx_bg_fixed.png" alt="公众号">
        </div>
        <div class="gzh_content">
            <h2>关注微信公众号“2022张家口”</h2>
            <p>开通支付账户，实时获取积分动态信息 </p>
            <div class="btn_box">长按识别</div>
        </div>
    </div>

    <script src="./js/flexible.js"></script>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script>

        $(".password-div input").on("input", function (e) { //标签为password-div下的input添加oninput事件
            var number = 6;   //定义输入最大值
            var pw = $("input[name = 'password']").val(); //定义pw为name是password的input框的输入值
            var list = $(".password-div ul li");  //定义list是li
            for (var i = 0; i < number; i++) {    //for循环遍历将·放入li标签
                if (pw[i]) {
                    $(list[i]).text("·");
                } else {
                    $(list[i]).text("");
                };
            };
        });
        $(".password-div ul").click(function () {
            $("input[name = 'password']").val("");
            $("#password").focus();
            $(".password-div ul li").text("");
        });

    </script>
</body>

</html>